<template>
  <view class="apply-card">
    <view class="a-title">申请暂停相亲</view>
    <view class="a-content">暂停相亲后，您的相亲资料将不会被别人看到，也不会获得推荐。您仍然可以看到「完美繁花」为您推荐的对象，但想联系对方需要先取消暂停相亲。10天内只能开启一次暂停，请谨慎使用</view>

    <apply-con ref="applyConRef" :items="items"></apply-con>

    <view class="a-btns">
      <custom-btn class="a-btn" @click="cancelFn">取消</custom-btn>
      <custom-btn class="a-btn" @click="confirmFn">确定</custom-btn>
    </view>

  </view>
</template>

<script setup>
import ApplyCon from "./apply-con.vue";
import { editUserDetail } from "@/api/my";

// 引入api
import useStore from "@/store";
const { common } = useStore();

const fatherFn = inject("fatherFn", {});
const emits = defineEmits(["confirm", "cancel"]);
const applyConRef = ref();
const items = reactive([
  {
    id: 1,
    text: "孩子已在本平台找到另一半",
  },
  {
    id: 2,
    text: "孩子已脱单，正在交往中",
  },
  {
    id: 3,
    text: "暂时隐藏资料",
  },
  {
    id: 4,
    text: "其他",
  },
]);

const cancelFn = () => {
  common.updatePopupOpen(false, "apply");
};
const confirmFn = () => {
  const stop_reason = applyConRef.value.checked;
  const user_info = {
    status: 1,
    stop_reason,
  };
  editUserDetail({ user_info: JSON.stringify(user_info) }).then((res) => {
    uni.showToast({
      title: "隐藏成功",
      icon: "none",
    });
    fatherFn.confirmFn();
    common.updatePopupOpen(false, "apply");
  });
};
</script>

<style lang=scss scoped>
.apply-card {
  padding: 60rpx 50rpx;
  background: #fff;
  border-radius: 40rpx 40rpx 0 0;
}
.a-title {
  font-weight: 800;
  font-size: 48rpx;
  color: #000;
  text-align: center;
}
.a-content {
  font-weight: 500;
  font-size: 28rpx;
  color: #999;
  padding: 40rpx 0;
}
.a-sub-title {
  font-weight: bold;
  font-size: 36rpx;
  color: #000;
  padding-bottom: 40rpx;
}
.a-item {
  width: 650rpx;
  height: 120rpx;
  @include borderBox;
  padding: 40rpx 30rpx;
  background: #f8f8f8;
  border-radius: 60rpx;
  margin-bottom: 20rpx;
  font-weight: bold;
  font-size: 36rpx;
  color: #333;
  display: flex;
  align-items: center;
  border: 2rpx solid #f8f8f8;
}
.a-checkbox {
  width: 40rpx;
  height: 40rpx;
  background: #fff;
  border-radius: 40rpx;
  border: 2rpx solid #ddd;
}

.active-item {
  color: #f65952;
  background: rgba(246, 89, 82, 0.1);
  border: 2rpx solid #f65952;
}

.a-btns {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0 60rpx;
}

.a-btn {
  width: 310rpx;
  height: 120rpx;
  line-height: 120rpx;
  border-radius: 120rpx;
  border: 2rpx solid #f65952;
  background: #fff;
  font-weight: 800;
  font-size: 36rpx;
  color: #f65952;
  &:last-child {
    background: #f65952;
    color: #fff;
  }
}
</style>